<template>
  <div class="userMaIndex">
    <userHeader />
    <div class="breadClum">
      <span>
             <router-link :to="{path:'/pageIndex'}" ><a class="bread1">当前位置：首页  >  </a></router-link>
             <router-link :to="{path:'/systemSetting'}" > <a class="bread2">系统设置  ></a></router-link>
            <a class="bread2">用户管理</a>
      </span>
    </div>
    <div class="navList">
      <router-link :to="{path:'/addUser'}">
        <span class="sp1">添加用户</span>
      </router-link>
      <el-input placeholder="请输入内容"  ref="enterName" class="input-with-select" v-model="searchTextArea">
        <el-button slot="append"  @click.stop="searchContent">搜索</el-button>
      </el-input>
    </div>
    <el-table
      v-loading="loading"
      :row-class-name="tableRowClassName"
      :data="tableData3"
      :cell-class-name="cell"
      @selection-change="handleSelectionChange"
      stripe
      ref="dataListTable"
      style="width: 100%">
      <el-table-column
        label=""
        type="selection"
        width="70">
      </el-table-column>
      <el-table-column
        prop="user_name"
        label="用户名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="real_name"
        label="真实姓名"
       >
      </el-table-column>
      <!-- :label="company_names"
        :render-header="renderHeaderOne"-->
      <el-table-column
        prop="company_name"
        width="200"
       >
        <template slot="header" slot-scope="scope">
          <el-dropdown style="color:#5d9120;font-size:16px;margin-bottom:-8px;" trigger="click" @command="handleElementList">
                <span class="el-dropdown-link">
                  {{companyName}}<em class="arrow"></em>
                </span>
            <el-dropdown-menu slot="dropdown" style="overflow-y: scroll;height: 300px">
              <el-dropdown-item v-for="item in formatData2" :command="item.company_id" :key="item.element_id">{{item.company_name}}</el-dropdown-item>
              <el-dropdown-item command="none" v-if="formatData2.length==0">暂无数据</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        prop="section_name"
        label="所属部门"
        width="125">
      </el-table-column>
      <el-table-column
        prop="user_position"
        label="岗位"
        width="125">
      </el-table-column>
      <el-table-column
        prop="role_name"
        label="角色"
        width="80">
      </el-table-column>
      <el-table-column
        prop="leader_identify"
        label="负责人标识"
        width="80">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.leader_identify==1"
            active-color="#efba12"
            inactive-color="#dddddd">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="user_state"
        label="用户状态"
        width="80">
        <template slot-scope="scope">
          <el-switch
            v-model='scope.row.user_state==1'
            active-color="#efba12"
            inactive-color="#dddddd">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="guidance_identify"
        label="直管领导"
        width="110">
        <template slot-scope="scope">
          <el-switch
            v-model='scope.row.guidance_identify==1'
            active-color="#efba12"
            inactive-color="#dddddd">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <router-link :to="{path:'/addPosi',query:{role_id:scope.row.role_id,isManagement:true,user_id:scope.row.user_id,user_name:scope.row.user_name,real_roal:scope.row.role_name,real_name:scope.row.real_name,role_name:scope.row.role_id}}">
            <span class="e-ditor">编辑权限</span>
          </router-link>
          <span @click.stop="editor(scope.row.user_id,scope.row.index)" class="d-elete">编辑</span>
          <span @click.stop="delete1(scope.row.user_id,scope.row.index,scope.row)" class="d-elete">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="e-table-footer">
      <div class="e-selectAll">
        <el-checkbox @change="selectAll" v-model="selectAllValue"></el-checkbox>
      </div>
      <div class="e-selectText">
        <span class="e-del" @click.stop="deleteBtn">删除</span>
      </div>
    </div>
    <el-pagination
      :page-count=pageSize
      layout="total,prev, pager, next, jumper"
      :current-page.sync="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
    <deleteAlarm @cancelOpt="cancelOpt" @confirmOpt="confirmOpt" :dialogVisible2="dialogFormVisible2" />
    <el-dialog title="编辑" :visible.sync="dialogFormVisible" >
      <el-form :model="form"  ref="editorForm" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="user_name">
          <el-input v-model="form.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" :label-width="formLabelWidth" prop="real_name">
          <el-input v-model="form.real_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色选择" :label-width="formLabelWidth" prop="role_name">
          <el-select v-model="form.role_name" placeholder="请选择角色">
            <el-option :label=item.role_name :value=item.role_id v-for="(item,index) in roleType" :key="index">
              {{item.role_name}}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="评价单位" :label-width="formLabelWidth" prop="company_name" class="e-tree-1">
            <el-tree
              :data="data3"
              :props="defaultProps"
              :show-checkbox="true"
              default-expand-all
              :check-on-click-node="true"
              node-key="company_id"
              ref="tree"
              @check="checkTest"
              @node-click="nodeClick"
              @check-change="setCheckedKeys"
              :expand-on-click-node="false"
              :check-strictly=true
              highlight-current
              @current-change="changeCurrent"
            >
            </el-tree>
        </el-form-item>
        <el-form-item  :label-width="formLabelWidth" prop="section_name" label="部门">
          <el-select v-model="form.section_name" placeholder="请选择部门" >
            <el-option :label=item.section_name :value=item.section_id v-for="(item,index) in sectionType" :key="index" >
              {{item.section_name}}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位" :label-width="formLabelWidth"  prop="user_position">
          <el-input v-model="form.user_position" autocomplete="off"></el-input>
        </el-form-item>
        <!--<el-form-item label="密码" :label-width="formLabelWidth" >-->
          <!--<el-input v-model="form.user_pwd" autocomplete="off"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="负责人标识" :label-width="formLabelWidth">
          <el-radio v-model="form.leader_identify" label="1">是</el-radio>
          <el-radio v-model="form.leader_identify" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="直管领导"  :label-width="formLabelWidth">
          <el-radio v-model="form.guidance_identify" label="1">是</el-radio>
          <el-radio v-model="form.guidance_identify" label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="直管部门"  :label-width="formLabelWidth" v-if="form.guidance_identify==1" >
          <el-select v-model="regulate_section" multiple placeholder="请选择">
            <el-option
              v-for="item in sectionType2"
              :key="item.section_name"
              :label="item.section_name"
              :disabled="item.is_choice==0"
              :value="item.section_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态" :label-width="formLabelWidth">
          <el-radio v-model="form.user_state" label="1">在用</el-radio>
          <el-radio v-model="form.user_state" label="0">停用</el-radio>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmModifyUser('editorForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import treeToArraysCompany from '@/page/test/index.js'
  import userHeader from '@/components/header.vue'
  import paganition from '@/components/paganition.vue'
  import deleteAlarm from '@/components/deleteAlarm.vue';
  import {mapState} from 'vuex'
  export default({
    components:{
      userHeader,
      paganition,
      deleteAlarm
    },
    data (){
        var checkSection=(rule, value, callback) =>{
         console.log(this.form.section_name)
          this.form.section_id =this.form.section_name;
          if(!this.form.section_name){
            return callback(new Error('请选择部门'));
          }else {
            callback()
          }
        };
      var checkCompany=(rule, value, callback) =>{
        console.log(this.currentNodeKey)
        if(!this.currentNodeKey.company_name){
          return callback(new Error('请选择评价单位'));
        }else {
          callback()
        }
      };
      var checkUser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请填写用户名'));
        }
        else {
          callback();
        }
      };
      var checkRealName = (rule, value, callback) => {
          console.log(value)
          var regName =/^[\u4E00-\u9FA5]{2,4}$/
        if (value === '') {
          callback(new Error('真实姓名由中文组成'));
        }else if(!regName.test(value)){
          callback(new Error('请填写真实姓名'))
        }
        else {
          callback();
        }
      };
      var checkregulate_section=(rule, value, callback) => {
          console.log(this.form.guidance_identify)
          if(this.form.guidance_identify==1){
            if(this.regulate_section.length==0){
              callback(new Error('请选择直管部门'));
            }
            callback();
          }else{
            callback();
          }
      };
      return {
        elementList:[],
        searchTextArea:'',
        dialogFormVisible2:false,
        dialogFormVisible:false,
        formLabelWidth:'160px',
        radiocode:1,
        index:0,
        radio:1,
        page:1,
        pageSize:1,
        total:0,
        currentPage:1,
        pageCount:0,
        user_id:'',
        roleType:[],
        selectAllValue:false,
        loading:true,
        multipleSelection:[],
        regulate_section:[],
        sectionType:[],
        sectionType2:[],
        deleteMore:false,
        loading:true,
        companyData:[],
        company_name:'',
        companyName:'',
        company_id:'',
        companyId:'',
        userDataStr:'',
        i:0,
        tempCompany:[],
        form: {
          name: '',
          desc:'',
          region:''
        },
        treeData:[],
        data3:[],
       tableData3: [],
        rules: {
          user_name: [
            { required: true,validator:checkUser}
          ],
          real_name:[
            { required: true,validator:checkRealName}
          ],
          company_name:[
            { required: true,validator:checkCompany}
          ],
          section_name:[
            { required: true,validator:checkSection}
          ],
          checkregulate:[
            { required: true,validator:checkregulate_section}
          ]
        },
        defaultProps: {
          children: 'son_company',
          label: 'company_name'
        },
      }
    },
    computed:{
      ...mapState({
        company_names:state =>state.app.loginState.company_name||sessionStorage.getItem('company_name'),
        company_ids:state =>state.app.loginState.company_id||sessionStorage.getItem('company_id'),
        height:state=>sessionStorage.getItem('height')||state.app.height,
      }),
      formatData2: function() {
        let tmp;
        console.log('`````````````');
        console.log(this.companyData);
        if (!Array.isArray(this.companyData)) {
          tmp = [this.companyData]
        } else {
          tmp = this.companyData
        }
        const func = this.evalFunc || treeToArraysCompany
        const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
        console.log(func.apply(null, args))
        return func.apply(null, args)
      }
    },
    methods: {
//        全选
      selectAll(){
        this.$refs.dataListTable.toggleAllSelection();
      },
      handleSelectionChange(val){
        console.log(val)
        console.log(this.tableData3)
        console.log(val.length != this.tableData3.length)
        if(val.length != this.tableData3.length){
          this.selectAllValue = false
        }else {
          this.selectAllValue = true
        }
        this.multipleSelection =val;
      },
        //获取指定公司用户
      getcompanyData(ID){
        this.axios.get('/api/v1/system/users',{
            params:{
              company_id:ID,
              limit:10,
              page:this.page
            }
        })
          .then((res)=>{
            if(res.data.code==0){
              this.tableData3 =res.data.data;
              this.pageSize =res.data.pagination.pages
              this.currentPage=res.data.pagination.page
              this.loading =false;
            }
          })
      },
      //表格内控要素的筛选
      handleElementList(command){
          this.page=1;
        this.formatData2.map(item => {
            if(item.company_id==command){
                this.companyName =item.company_name
            }
        })
        this.companyId =command;
        this.loading=true;
        this.getcompanyData(command);
        console.log(this.companyName);
      },
      renderHeaderOne (h, {column, $index}) {
        //下拉框内容包裹在一个div里面
        return h('ul',[
          h('el-select',{//el-select实现下拉框
            on:{
              input: (value) => {//随着下拉框的不同，文字框里的内容在边
                this.logLevel = value;
                this.getcompanyData(this.logLevel);
                this.companyId =this.logLevel;
              },
            },
            props:{
              value:this.logLevel,//文字框的内容取决于这个value，如果value不存在，会报错
            },
          },[
            //下拉框里面填充选项，通过filters遍历map，为每一个选项赋值。
            this.formatData2.map(item => {
              return h("el-option", {
                props: {
                  value: item.company_id,
                  label: item.company_name
                }
              })
            })
          ])])
      },
      onSearch() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
          target: document.querySelector('.div1')
        });
        setTimeout(() => {
          loading.close();
        }, 2000);
      },
      cell({row, column, rowIndex, columnIndex}) {
        //第八列添加 red 类
        if(columnIndex==3){
          return "belong-company"
        }
      },
      searchContent(){
          if(!this.searchTextArea){
          }else{
              this.axios.get('/api/v1/system/users',{
                  params:{
                    search:this.searchTextArea
                  }
              }).then((res)=>{
                  this.tableData3 =res.data.data;
              })
          }
      },
      nodeClick(data,checked,node){
        this.getDepartement(data.company_id);
        this.getuserDepartement(data.company_id)
      },
      checkTest(data,checkNode){
          console.log(data.company_id)
        this.form.company_id=data.company_id;
        this.form.section_name='';
        this.getDepartement(data.company_id);
        this.getuserDepartement(data.company_id)
      },
        //分页状态改变
      currentChange(val){
          this.page =val
          this.getUserList(this.page,this.companyId)
      },
      //树状结构分类
      changeCurrent(data,node,test){
//        console.log(data)
//        console.log(node)
      },
      setCheckedKeys(data,checked,node){
          this.i++;
          if(this.i%2==0) {
            if (checked) {
              this.$refs.tree.setCheckedNodes([]);
              this.$refs.tree.setCheckedNodes([data]);
              //交叉点击节点
            } else {
              this.currentNodeKey=''
              this.$refs.tree.setCheckedNodes([]);
              //点击已经选中的节点，置空
            }
          }else{
            this.currentNodeKey ={
              company_id:data.company_id,
              company_name:data.company_name
            }
          }
      },
      tableRowClassName ({row, rowIndex}) {
               //把每一行的索引放进row
               row.index = rowIndex;
       },
      deleteBtn(){
        this.dialogFormVisible2 =true;
        this.deleteMore =true;
        console.log(this.multipleSelection)
        for(var i in this.multipleSelection){
            if(i==this.multipleSelection.length-1||this.multipleSelection.length==1){
                this.userDataStr+=this.multipleSelection[i].user_id;
            }else{
              this.userDataStr+=this.multipleSelection[i].user_id+','
            }
        };
        let that =this;
        console.log(this.userDataStr);
      },
      editor(id,index){
        console.log(id,index)
        this.dialogFormVisible =true
        this.user_id =id
        this.index =index
         this.getUserData(id,index)
      },
      isInArray(num,arr){
          for(var i in arr){
              if(arr[i]==num){
                return true
              }
          }
      },
      //修改用户信息
      confirmModifyUser(formName){
        let that =this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
              if(this.form.guidance_identify==1){
//                  alert(this.form.section_id);
                  if(this.form.leader_identify==1){
                    if(this.isInArray(this.form.section_id,this.regulate_section)){
                      this.$alert('部门负责人不能作为本部门的直属领导','提示');
                      return false;
                    }
                  }
                  console.log(this.regulate_section)
              }
            this.axios.put('/api/v1/system/users/'+`${this.user_id}`,
              {
                user_id:this.user_id,
                user_name:this.form.user_name,
                real_name:this.form.real_name,
                role_id:parseInt(this.form.role_name)||parseInt(this.form.role_id),
                company_id:this.form.company_id,
                guidance_identify:this.form.guidance_identify,
                regulate_section:this.regulate_section,
                section_id:this.form.section_id,
                user_position:this.form.user_position,
                leader_identify:this.form.leader_identify,
                user_state:this.form.user_state
              })
              .then((res)=>{
                console.log(res)
                if(res.data.code==0){
                    this.$alert('修改成功','提示');
                    this.getUserList(this.page,this.companyId);
                    that.dialogFormVisible =false;
                   this.regulate_section=[];
                   if(this.form.guidance_identify==1){
                       this.tableData3[this.index].guidance_identify=1;
                   }
                }else{
                  this.$alert(res.data.message,'提示');
                }
              })
          }else{
            console.log('error submit!!');
            return false;
          }
        })
      },
    //获取评价单位
      getCompany(){
        this.axios.get('/api/v1/system/comsection')
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
                this.data3 =res.data.data
            }
          })
          .catch((err)=>{
          console.log(err)
        })
      },
      getDepartement(company_id){
          this.sectionType=[]
        this.axios.get('/api/v1/system/comsection/'+`${company_id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
                this.loading =false
                this.sectionType =res.data.data;
                console.log(this.sectionType)
            }
          })
          .catch((err)=>{
            console.log(err)
          })
      },
      //获取直管部门
      getuserDepartement(company_id){
        this.sectionType2=[]
        this.axios.get('/api/v1/system/usersection/'+`${company_id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.loading =false
              this.sectionType2 =res.data.data
            }else{
              this.$alert(res.data.message,'提示')
            }
          })
          .catch((err)=>{
            console.log(err)
          })
      },

      getUserData(id,index){
        this.axios.get('/api/v1/system/users/'+`${id}`)
          .then((res)=>{
            console.log(res.data.data)
            if(res.data.code==0){
              this.form =res.data.data;
//              console.log(this.form);
              this.form.company_id=res.data.data.company_id;
              this.form.role_id =res.data.data.role_id;
              this.regulate_section=res.data.data.regulate_section;
              this.form.guidance_identify =res.data.data.guidance_identify;
              this.$refs.tree.setCheckedKeys([res.data.data.company_id]);
              this.getDepartement(this.form.company_id);
              this.getuserDepartement(this.form.company_id);
              this.form.section_name =res.data.data.section_id;
            }
          }).catch((err)=>{
          console.log(err)
        })
      },
      getRoleType(){
        this.axios.get('/api/v1/system/userroles')
          .then((res)=>{
            if(res.data.code==0){
              this.roleType =res.data.data
            }
          }).catch((err)=>{
          console.log(err)
        })
      },
      //获取用户列表
      getUserList(page,companyId){
        this.axios.get('api/v1/system/users/',{
          params:{
            limit:10,
            page:page,
            company_id:companyId,
          }
        })
          .then((res)=>{
            if(res.data.code==0){
                this.loading =false;
                this.tableData3 =res.data.data;
                console.log(res.data.data)
                for(var i in res.data.data){
                  this.tableData3[i].user_state=res.data.data[i].user_state
                }
                this.total = res.data.pagination.total
                this.pageSize =res.data.pagination.pages
                this.currentPage=res.data.pagination.page
            }else{
//                this.$alert(res.data.message,'提示')
            }
          }).catch((err)=>{
          this.$alert(err.error,'提示')
        })
      },
      delete1(userid,index,row){
          this.dialogFormVisible2=true
          this.user_id =userid;
          this.index =index;
          if(this.multipleSelection.length>=1){
            this.multipleSelection=[];
          }
        this.multipleSelection.push(row);
          console.log( this.multipleSelection)
      },
      //删除用户
      confirmOpt(){
         let that =this;
        if(this.deleteMore){
          this.deleteUserData(this.userDataStr);
        }else{
          this.deleteUserData(this.user_id);
        }
      },
      deleteUserData(userId){
          console.log(this.multipleSelection);
          console.log(this.tableData3)
        this.axios.delete('/api/v1/system/users/'+`${userId}`)
          .then((res)=>{
            console.log(res)
            if(res.data.code==0) {
              for (var k in this.multipleSelection) {
                  for (var m in this.tableData3) {
                    if (this.multipleSelection[k].user_id == this.tableData3[m].user_id) {
                      this.tableData3.splice(m, 1)
                    }
                  }
                }
              this.dialogFormVisible2 = false
                this.$alert('删除成功', '提示');
            }else{
                this.$alert(res.data.message,'提示')
            }
          }).then((res)=>{
              this.deleteMore=false;
              this.multipleSelection=[];
              this.userDataStr='';
        })
      },
      cancelOpt(){
        this.dialogFormVisible2 =false
      },
      getNewDate(str){
        if(!str){
          return 0;
        }
        var arr=str.split(" ");
        var d=arr[0].split("-");
        var t=arr[1].split(":");
        var date = new Date();
        date.setUTCFullYear(d[0], d[1] - 1, d[2]);
        date.setUTCHours(t[0], t[1], 0);
        return date;
      },
      //初始化树状结构的公司列表
      initCompanyData(){
        this.axios.get('/api/v1/system/comsection?subor=collar').then((res)=>{
          if(res.data.code==0){
            this.companyData =res.data.data;
            console.log(this.companyData)
          }else{
            //异常处理
          }
        })
      },

    },
    mounted(){
      this.getUserList(this.page,this.company_ids)
      this.getRoleType();
      this.getCompany();
      console.log(this.company_names);
      this.logLevel =this.company_names;
      this.companyName =this.company_names;
      this.companyId =this.company_ids;

    },
    created(){
      this.initCompanyData()
    },

  })
</script>
<style scoped="">
  .userMaIndex  >>> .navList>div{
    background: white;
  }
  .userMaIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
 .userMaIndex .el-table  >>>  th.is-leaf{
    background: #d3e9bb;
    height:58px;

  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell{
    font-size: 14px;
    color: #5d9120;
    font-weight: normal;
  }
  .userMaIndex .el-table  >>> thead .el-checkbox{
    display: none;
  }
  .userMaIndex .el-table  >>> tr  th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .userMaIndex .el-table  >>> .el-table__body-wrapper{
  }
  .userMaIndex .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row{
    height: 50px !important;
  }
  .userMaIndex .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td{
    height: 50px;
    /*border-bottom: 1px solid #aac983;*/
    border-right: 1px solid #aac983;
  }
  .userMaIndex .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td.belong-company .cell{
    padding-left: 6px;
    padding-right: 0;
  }
  .userMaIndex .el-table >>> .el-table__body-wrapper   .el-table__body tr{
    border-bottom: 1px solid #aac983;
  }
  .userMaIndex  .el-table  >>> .el-table__body-wrapper  .el-table__body  .el-table__row .cell{
    text-align: center;
  }
  .userMaIndex .el-table .el-dropdown >>>  span{
    font-size: 14px;
  }
  .userMaIndex  .el-table  >>>  .el-table__header .has-gutter th{
    text-align: center;
  }
  .userMaIndex .el-table >>>  span.e-ditor{
    margin-right:12px ;
    color: #4577bf;
    text-decoration: underline;
  }
  .userMaIndex .el-table >>>  span.d-elete{
    color: #4577bf;
    text-decoration: underline;
    margin-right: 12px;
  }
  .userMaIndex  .e-table-footer{
    background: #d3e9bb;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .userMaIndex  .e-table-footer  .e-selectAll{
    width: 71px;
    text-align: center;
    border-left: 1px solid #aac983;
    border-right: 1px solid #aac983;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
  }
  .userMaIndex .e-table-footer .e-selectText{
    display: inline-block;
    margin-left: 20px;
    color: #5d9120;
  }
  .userMaIndex .e-selectText .e-del{
    font-size: 16px;
    color: #fff;
    padding: 6px 20px;
    background: #f56c6c;
    border-radius:2px ;
    -webkit-border-radius: 2px;
    margin-left: 30px;

  }

  .userMaIndex  .input-with-select{
    display: inline-block;
    width: 260px;
    height: 28px;
    margin-left: 32px;

  }
  .userMaIndex .input-with-select >>> .el-input-group__append{
    display: inline-block;
    width: 40px;
    height: 100%;
    line-height: 28px;
    margin-left: 6px;
    border: none !important;
  }
  .userMaIndex .input-with-select >>> .el-input__inner{
    display: inline-block;
    width: 170px;
    height: 100%;

  }
  .userMaIndex  .input-with-select  >>> .el-input-group__append{
    position: relative;
  }
  .userMaIndex  .input-with-select  >>> .el-input-group__append .el-button{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    background: #f2b914;
    margin: 0;
    padding: 0;
    border:none;
    border-radius: 3px;
    -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
  }

  .userMaIndex .input-with-select  >>> .el-input-group__append .el-button span{
    margin-top: 0;
    background:#f0b914 ;
    padding: 0;
    position: relative;
    color: white;
    margin-left: -10px;
  }
  .userMaIndex .input-with-select  >>> .el-input-group__append .el-button span:before{
    position: absolute;
    content: '';
    right:-20px;
    top:50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background-image: url("../../static/images/search.png");
    background-repeat:no-repeat ;
    background-position: center;
  }
  .userMaIndex >>> .navList a span {
    display: inline-block;
    padding: 6px 20px;
    background: #8bc34a;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    font-size: 14px;
    color: white;
    margin-right: 7px;
    margin-top: 10px;
  }
  .userMaIndex  .navList{
      padding-bottom: 10px;
    border-bottom: none;
  }

  .userMaIndex>>>  .el-form-item__error{
    display: inline-block;
    left: 390px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .userMaIndex>>>  .e-tree-1{
    margin-bottom: 20px;
  }
  .userMaIndex>>>  .e-tree-1  .el-form-item__error{
    display: inline-block;
    left: 0px;
    top:100%;
  }
  .userMaIndex >>> .el-dialog{
    /*width: 560px;*/
  }
  .userMaIndex >>> .el-dialog .el-dialog__body{
      /*text-align: center;*/
  }

  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-select{
    width: 100%;
  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-select .el-input--suffix .el-input__inner{
    padding: 0;
    text-align: center;
    border: none;
    background-color: #d3e9bb;
    height: auto;
    line-height: 1;
    color: #5d9120;
  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-input{

  }
  .userMaIndex .el-table  >>> thead  th.is-leaf .cell .el-input .el-input__suffix{
    display: inline-block;
    width:17px;
    height: 15px;
    background: #afd682;
    top:50%;
    margin-top: -7px;
  }

  .userMaIndex .el-table  >>> thead  .cell  .el-select .el-input .el-select__caret{
    color: white;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
  }
  .userMaIndex .el-table  >>> thead  .cell .el-select .el-input .el-select__caret.is-reverse{
    transform: none;
    -webkit-transform: none;
    top:0;
    margin-top: -12px;
  }
  .userMaIndex >>>.el-table{
    margin-bottom: 0 !important;
  }

  .arrow{
    display: inline-block;
    width: 17px;
    height:15px;
    margin-left:4px;
    border-radius:4px;
    position: relative;
  }
  .arrow::after{
    content:'';
    display: block;
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:2px;
    background: #afd682 url("../../static/images/icon-down.png") no-repeat center;
  }
  @media screen and (max-width: 1400px) {
    .userMaIndex{
      padding: 6px;
    }
  }
  /*.el-table >>> .el-table_1_column_6 .*/
</style>
<style>


</style>
